<!--
 * @Description: 好友分享单品，详情见UI图：《分享卡片、好友分享列表》
 * @Author: acexu 578599619@qq.com
 * @Date: 2024-11-02 10:45:14
 * @LastEditors: acexu 578599619@qq.com
 * @LastEditTime: 2024-11-02 18:35:58
 * @FilePath: /xp-platform-mobile/sheep/components/f-share-card/f-share-card.vue
 * @demoPic: 
-->
<template>
	<view class="card-share">
		<image class="goodsPic" :src="showInfo.imageThumbnailUrl"></image>
		<view class="mid">
			<!-- 		<view class="name">
				{{ dataList.name }}
			</view> -->
			<view class="code">
				{{ showInfo.imageName }}
			</view>
		</view>
		<!-- <image class="cart" v-if="showCart" :src="cartImg" @click="cartClick"></image> -->
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	const props = defineProps({
		showInfo: {
			type: Object,
			default: {},
		},
	});
</script>

<style lang="scss" scoped>
	.card-share {
		height: 240rpx;
		background: #ffffff;
		box-shadow: 0px 60px 20px -50px rgba(18, 24, 26, 0.1);
		border-radius: 16rpx;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		margin: 32rpx;
		box-sizing: border-box;

		.goodsPic {
			width: 208rpx;
			height: 208rpx;
			box-shadow: 0px 26px 12px -20px rgba(18, 24, 26, 0.2);
			border-radius: 16rpx;
		}

		.mid {
			flex-grow: 1;
			align-self: flex-start;
			padding-left: 28rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			height: 100%;
			box-sizing: border-box;

			.name {
				font-weight: 500;
				font-size: 32rpx;
				color: #111111;
			}

			.code {
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
			}
		}

		.cart {
			width: 80rpx;
			height: 80rpx;
			background: #ff6c01;
			opacity: 0.1;
		}
	}
</style>
